<template>
  <div class="header">
      <div class="logo-all">
        <img src="../assets/logo.png" alt=""/>
      </div>
      <div class="content">
        <div class="content-text">
          <div>
            愿在你所含全部原子再度按热力学第二定律回归自然之前，它们既经历过物性的神奇，也产生过人性的可爱
          </div>

        </div>

      </div>
    <div v-if='!user' class="user-info">
      <div class="login">
        <router-link to="/"><el-button type="primary"  @click="dialogVisible = true,loginOrReg='login'">登录</el-button></router-link>

      </div>
      <div class="register">
        <router-link to="/"><el-button type="primary" @click="dialogVisible = true,loginOrReg='reg'">注册</el-button></router-link>
      </div>
    </div>
    <div v-else class="user-info">
      <el-tag type="success">{{user.name}}</el-tag>
      <el-tag type="info">大驾光临</el-tag>
      <el-button type="primary" @click='logout'>退出</el-button>
    </div>
    <el-dialog ref='dialog'
      title="提示"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width='550px'>
      <Login :loginHidden='handleClose' v-if="loginOrReg === 'login'"></Login>
      <Register :loginHidden='handleClose' v-if="loginOrReg === 'reg'"></Register>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>

</template>
<script>
  import Vue from 'vue';
  import { Button,Tag,Dialog,MessageBox} from 'element-ui';
  import Login from '../components/user/login'
  import Register from '../components/user/register'
  Vue.use(Button);
  Vue.use(Tag)
  Vue.use(Dialog)
  Vue.prototype.$confirm = MessageBox.confirm
  export default {
      name:'Header',
      data() {
          return {
            loginOrReg:'',
            dialogVisible: false
          }
      },
      created(){

      },

      methods: {
        logout(){
          this.$store.commit('logout')
        },
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     done();
          //   })
          //   .catch(_ => {});
          this.dialogVisible = false
        }

      },
      computed: {
        user(){
          return this.$store.state.user
        }
      },
      components: {Login,Register}
  }
</script>
<style scoped lang="less">
  .header{
    display: flex;
    background: blanchedalmond;
    .logo-all{
      width: 150px;
      height: 150px;
      flex-shrink:0;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .content{
      font-family: cursive;
      font-size: 30px;
      display: flex;
      align-items: center;
      div{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .login,.register{
      display: flex;
      align-items: center;
    }

    .user-info{
      display: flex;
      align-items: center;
      flex-direction:column;
      justify-content: center;

    }
  }
</style>
